<template>
	<view>
		<!--1.轮播图-->
		<view style="padding: 30rpx;">  
      <text class="section-title">城市风光</text>
			<swiper circular indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item style="background-color: #808080;">
					<image src="/static/city1.png" style="width: 100%;" />
				</swiper-item>
				<swiper-item style="background-color: #808080;">
					<image src="/static/city2.jpg" style="width: 100%;" />
				</swiper-item>
				<swiper-item style="background-color: #808080;">
					<image src="/static/city3.jpg" style="width: 100%;" />
				</swiper-item>
				<swiper-item style="background-color: #808080;">
					<image src="/static/city4.jpg" style="width: 100%;" />
				</swiper-item>
				<swiper-item style="background-color: #808080;">
					<image src="/static/city5.jpg" style="width: 100%;" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 2. 城市介绍（-->
		<view class="section">
		      <text class="section-title">泉州介绍</text>
		      <view class="city-intro">
		        <rich-text :nodes="introHtml"></rich-text>
		      </view>
		    </view>
		<!-- 3. 探索进度 -->
		<view class="section">
			<text class="section-title">探索进度</text>
			<view class="progress-section">
				<text>当前进度: {{ progress }}%</text>
				<progress :percent="progress" show-info stroke-width="6" />
			</view>
		</view>
		<!-- 4. 城市选择 -->
		<view class="section">
			<text class="section-title">城市选择</text>
			<view class="picker-section">
				<picker mode="region" @change="onRegionChange" :value="region">
					<view class="picker-text">当前选择: {{ region[0] }}-{{ region[1] }}-{{ region[2] }}</view>
				</picker>
			</view>
		</view>
		<!-- 5. 媒体展示-->
		<view class="media-section" style="padding: 30rpx;">
			<text class="section-title">城市媒体</text>
			<view class="media-section">
				<video class="video" :src="videoUrl" controls></video>
			</view>
		</view>
		<!-- 6. 偏好设置 -->
		<view class="section">
			<text class="section-title">探索偏好设置</text>
			<view class="preference-section">
				<view class="radio-group">
					<text>出行方式:</text>
					<radio-group @change="onRadioChange">
						<label v-for="(item, index) in travelModes" :key="index" class="radio-label">
							<radio :value="item.value" :checked="item.value === selectedTravel" />{{ item.label }}
						</label>
					</radio-group>
				</view>
				<view class="switch-section">
					<text>显示推荐景点:</text>
					<switch :checked="showRecommend" @change="onSwitchChange" />
				</view>
				<view class="slider-section">
					<text>探索半径: {{ radius }}km</text>
					<slider :value="radius" @change="onSliderChange" min="1" max="20" step="1" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				introHtml: `
				        <div>
				          <h3>海上丝绸之路起点 - 泉州</h3>
				          <p>泉州，福建省下辖地级市，简称"鲤"，别名鲤城、刺桐城，位于福建省东南沿海，北承福州，南接厦门，东望台湾岛。</p>
				          <p>作为国务院首批公布的24个历史文化名城之一，泉州是古代"<span class='highlight'>海上丝绸之路</span>"的起点，宋元时期被誉为"<span class='highlight'>东方第一大港</span>"。</p>
				          <p>泉州拥有众多著名景点：<span class='highlight'>清源山</span>、<span class='highlight'>开元寺</span>、<span class='highlight'>清净寺</span>、<span class='highlight'>崇武古城</span>、<span class='highlight'>洛阳桥</span>、<span class='highlight'>安平桥</span>等，吸引着无数游客前来探访。</p>
				          <p>特色文化方面，泉州保留了丰富的非物质文化遗产，包括<span class='highlight'>南音</span>、<span class='highlight'>提线木偶戏</span>、<span class='highlight'>梨园戏</span>、<span class='highlight'>闽南建筑技艺</span>等。</p>
				        </div>
				      `,
				progress: 60,
				region: ['福建省', '泉州市', '丰泽区'],
				videoUrl: "/static/city-video.mp4",
				travelModes: [{
						label: '公交',
						value: 'bus'
					},
					{
						label: '自驾',
						value: 'drive'
					},
					{
						label: '步行',
						value: 'walk'
					}
				],
				selectedTravel: 'bus',
				showRecommend: true,
				radius: 12
			}
		},
		methods: {
			onRegionChange(e) {
			      this.region = e.detail.value;
			    },
			    onRadioChange(e) {
			      this.selectedTravel = e.detail.value;
			    },
			    onSwitchChange(e) {
			      this.showRecommend = e.detail.value;
			    },
			    onSliderChange(e) {
			      this.radius = e.detail.value;
				  }

		}
	}
</script>

<style>
	.city-intro {
	  font-size: 28rpx;
	  line-height: 1.6;
	  color: #666;
	}
	
	.city-intro >>> .highlight {
	  color: #e63946; 
	  font-weight: bold;
	  padding: 2rpx 6rpx;
	  border-radius: 4rpx;
	}
	.scroll-container {
		height: 100vh;
		width: 100%;
		background-color: #f5f5f5;
	}

	.section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
	}

	.section-title {
		display: block;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
	}

	.swiper {
		height: 360rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.city-intro {
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
	}

	.city-intro h3 {
		font-size: 32rpx;
		color: #333;
		margin: 10rpx 0;
	}

	.city-intro p {
		margin-bottom: 15rpx;
	}

	.progress-section {
		padding: 10rpx 0;
	}

	.progress-section text {
		display: block;
		margin-bottom: 10rpx;
		color: #666;
	}

	.picker-section {
		padding: 10rpx 0;
	}

	.picker-text {
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		color: #333;
	}

	.media-section {
		padding: 10rpx 0;
	}

	.video {
		width: 100%;
		height: 360rpx;
		border-radius: 8rpx;
	}

	.audio-section {
		margin-top: 20rpx;
		padding: 15rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.audio-section text {
		display: block;
		margin-bottom: 10rpx;
		color: #666;
	}

	.preference-section {
		padding: 10rpx 0;
	}

	.radio-group,
	.switch-section,
	.slider-section {
		margin-bottom: 30rpx;
		padding: 10rpx;
	}

	.radio-group text,
	.switch-section text,
	.slider-section text {
		display: block;
		margin-bottom: 15rpx;
		color: #666;
	}

	.radio-label {
		margin-right: 40rpx;
		color: #333;
	}
</style>